<template>
  <div class="rollAll">
    <box-layout title="物料档案" :lgLeft="24" :btn-list="btnLists" @change-btn="changeBtn">
      <!-- 头部 -->
      <template #searchForm>
        <el-form-item label="物料分类">
          <el-select placeholder="请选择物料分类" style="width: 200px" v-model="queryParams.materialTypeId" clearable>
            <el-option v-for="option in materialTypeList" :key="option.id" :value="option.id" :label="option.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input
            v-model.trim="queryParams.name"
            @keyup.enter="handleSearch"
            style="width: 200px"
            placeholder="请输入名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch"><i-ep-search />搜索</el-button>
          <el-button @click="resetQuery('search')">
            <i-ep-refresh />
            重置</el-button
          >
        </el-form-item>
      </template>
      <!-- 表格 -->
      <template #tableLeft>
        <super-table
          ref="useFileRef"
          data-root="materials"
          v-bind="tableConfig"
          :queryForm="queryParams"
          :requestApi="getTableList"
        >
          <template #code="scope">
            <div
              v-if="scope.row?.code"
              @click="identCationClick(scope.row, 1)"
              class="text-[#1f5898] flex cursor-pointer items-center w-full"
            >
              <div class="mr-1 w-full">
                {{ scope.row?.code }}
                <svg-icon icon-class="treeEmit" size="12" />
              </div>
            </div>
          </template>
          <template #materialTypeName="scope">
            <div
              v-if="scope.row?.materialTypeName"
              @click="identCationClick(scope.row, 2)"
              class="text-[#1f5898] flex cursor-pointer items-center w-full"
            >
              <div class="mr-1 w-full">
                {{ scope.row?.materialTypeName }}
                <svg-icon icon-class="treeEmit" size="12" />
              </div>
            </div>
          </template>
          <template #handler="scope">
            <el-button
              v-for="item in buttons"
              :key="item.text"
              :type="item.type"
              size="small"
              link
              @click="handleOperate(item, scope.row)"
              >{{ item.text }}</el-button
            >
          </template>
          <template #materialUnitName="scope">
            <div @click="identCationClick(scope.row, 3)" class="text-[#1f5898] flex cursor-pointer items-center w-full">
              <div class="mr-1 w-full">
                {{ scope.row?.materialUnitName }}
                <svg-icon icon-class="treeEmit" size="12" />
              </div>
            </div>
          </template>
        </super-table>
      </template>
    </box-layout>
    <dialogMaterialFile
      @handle-close="handleSearch"
      ref="materialFileRef"
      :title="`${type === 'edit' ? '编辑' : '新增'}`"
      :type="type"
    />
    <customClassification @handle-close="handleSearch" ref="customFileRef" :title="titleClass" />
  </div>
</template>
<script setup lang="ts">
import { ref, useTemplateRef } from "vue";
import boxLayout from "@/components/boxLayout/index.vue";
import SuperTable from "@/components/SuperTable/index.vue";
import dialogMaterialFile from "./components/dialogMaterialFile.vue";
import customClassification from "./components/customClassification.vue";
import { useConfirm } from "@/hooks/useConfirm";
import { tableConfig } from "./tableConfig";
import { getMaterial, getMaterialType, delMaterial } from "@/api/materialFile";
const materialTypeList = ref<any[]>([]);
onMounted(() => {
  getMaterialTypes();
});
// btn按钮
type CrossMpa = "add" | "edit" | "";
const btnLists: any = ["新增物料"];
const buttons = [
  { type: "primary", text: "编辑" },
  { type: "danger", text: "删除" },
] as const;
const type = ref<CrossMpa>("");
const queryParams = reactive({
  name: "",
  materialTypeId: "",
});
const materialFileRef = useTemplateRef<any>("materialFileRef");
const useFileRef = useTemplateRef<any>("useFileRef");
// btn按钮
const changeBtn = (_row: string) => {
  switch (_row) {
    case "新增物料":
      type.value = "add";
      materialFileRef.value.openDialog({});
      break;
    default:
  }
};
// 搜索
const handleSearch = (bool: boolean | Event = true)=> {
  if (bool) {
    useFileRef.value?.handleSearch();
  }
};
// 重置
const resetQuery = (str?: string) => {
  if (str === "search") {
    queryParams.name = "";
    queryParams.materialTypeId = "";
  }
  useFileRef.value.handleSearch();
};
// 表格
const getTableList = (params: any) => {
  return getMaterial(params);
};

// 操作按钮
const handleOperate = (_type: any, _row: any) => {
  switch (_type.text) {
    case "编辑":
      type.value = "edit";
      materialFileRef.value.openDialog(_row);
      break;
    case "删除":
      deleteOperate(_row);
      break;
    default:
  }
};
// 删除
const deleteOperate = async (_row: any) => {
  let ids = _row.id;
  if (!ids) {
    ElMessage.warning("请勾删除除项");
    return;
  }
  const { showConfirm } = useConfirm("警告", "是否删除选择的物料档案，删除后不可以恢复？");
  const confirmed = await showConfirm();
  if (confirmed) {
    const params = {
      materialId: ids,
    };
    delMaterial(params).then((res: any) => {
      if (res) {
        ElMessage.success("删除成功");
        resetQuery();
      }
    });
  }
};
/**
 * 修改物料分类、物料编号
 * @param _row
 * @param type 1 代表物料编号 2 代表 物料分类
 */
const customFileRef = useTemplateRef<any>("customFileRef");
const titleClass = ref<string>("");
const identCationClick = (_row: any, type: number) => {
  if (type === 1) {
    titleClass.value = "编辑物料编号";
  } else if (type === 2) {
    titleClass.value = "物料分类";
  } else if (type === 3) {
    titleClass.value = "单位";
  }
  customFileRef.value.openDialog(_row, type);
};
// 物料分类
const getMaterialTypes = () => {
  const params = {
    page: 1,
    limit: 1000,
  };
  getMaterialType(params).then((res: any) => {
    if (res) {
      const obj: any = res["materialTypes"];
      const { items } = obj;
      materialTypeList.value = items;
    }
  });
};
</script>
